<template>
  <div class="purchase-detail">
    <!-- 顶部标题栏 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="title">退货出库单</h2>
        <el-tag type="warning" size="medium">{{ getStatusText(detailRow.inOrOutWarehouseType,detailRow.inOrOutWarehouseStatus) }}</el-tag>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleBack">返回</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </div>

    <!-- 基础信息 -->
    <div class="basic-info" v-if="detailData.length > 0">
      <div class="info-row">
        <div class="info-item">
          <span class="label">出库单号：</span>
          <span class="value">{{ detailRow.inOrOutOrderNumber }}</span>
        </div>
        <div class="info-item">
          <span class="label">供应商：</span>
          <span class="value">{{ detailRow.transferOutRoomWarehouseName }}</span>
        </div>
        <div class="info-item">
          <span class="label">出库仓库：</span>
          <span class="value">{{ detailRow.transferInRoomWarehouseName }}</span>
        </div>
        <div class="info-item">
          <span class="label">单据日期：</span>
          <span class="value">{{ detailRow.createTime }}</span>
        </div>
        <div class="info-item">
          <span class="label">出库说明：</span>
          <span class="value">{{ detailRow.remarks || '-' }}</span>
        </div>
      </div>
      <div class="info-row">
        <div class="info-item">
          <span class="label">创建人：</span>
          <span class="value">{{ detailRow.creator }}</span>
        </div>
        <div class="info-item">
          <span class="label">创建时间：</span>
          <span class="value">{{ detailRow.createTime }}</span>
        </div>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="goods-table">
      <el-table :data="detailData" border style="width: 100%" size="small">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="itemNumber" label="商品编码" width="120" align="center" />
        <el-table-column prop="productName" label="商品名称" min-width="150" align="center" show-overflow-tooltip />
        <el-table-column prop="image" label="图片" width="80" align="center">
          <template slot-scope="scope">
            <el-image 
              style="width: 50px; height: 50px"
              :src="scope.row.image"
              :preview-src-list="[scope.row.image]"
              fit="cover"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="sku" label="商品规格" width="120" align="center" />
        <el-table-column prop="unitName" label="单位" width="80" align="center" />
        <el-table-column prop="price" label="单价" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量" width="100" align="center" />
        <el-table-column prop="totalPrice" label="金额" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.totalPrice }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="remarks" label="备注" min-width="150" align="center" show-overflow-tooltip /> -->
      </el-table>
    </div>

    <!-- 底部信息 -->
    <!-- <div class="detail-footer">
      <div class="footer-left">
        <div class="remark-row">
          <span class="label">入库说明：</span>
          <span class="value">{{ detailData[0].remarks || '-' }}</span>
        </div>
      </div>
      <div class="footer-right">
        <div class="total-row">
          <span class="label">商品总数：</span>
          <span class="value">{{ getTotalNumber() }}</span>
        </div>
        <div class="total-row">
          <span class="label">商品总金额：</span>
          <span class="value price">{{ getTotalAmount() }}</span>
        </div>
      </div>
    </div> -->

    <!-- 操作按钮 -->
   
  </div>
</template>

<script>
export default {
  name: 'PurchaseReceiptDetail',
  props: {
    detailData: {
      type: Array,
      default: () => ([])
    },
    detailRow: {
      type: Object,
      default: () => ({})
    }
  },
  created() {
    console.log(this.detailData)
  },
  methods: {
         /** 获取状态文本 */
    getStatusText(type,status) {
      // 0:待出库(待入库) 1:已出库(已入库) 2:已取消
      const statusMap = {
        1: {
          0: "待出库",
          1: "已出库",
          2: "已取消",
        },
        2: {
          0: "待入库",
          1: "已入库",
          2: "已取消",
        },
      };
      return (
        statusMap[type][
          status
        ] || "未知状态"
      );
    },
    // 计算商品总数
    getTotalNumber() {
      return this.detailData.reduce((sum, item) => sum + (Number(item.number) || 0), 0);
    },
    // 计算商品总金额
    getTotalAmount() {
      return this.detailData.reduce((sum, item) => sum + (Number(item.totalPrice) || 0), 0).toFixed(2);
    },
    // 返回列表
    handleBack() {
      this.$emit('back');
    }
  }
};
</script>

<style lang="scss" scoped>
.purchase-detail {
  background: #fff;
  min-height: 100%;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #ebeef5;

    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
        margin: 0;
      }
    }
  }

  .basic-info {
    padding: 20px 24px;
    background: #fff;
    border-bottom: 1px solid #ebeef5;

    .info-row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .info-item {
        display: flex;
        align-items: center;
        width: 20%;
        min-width: 280px;
        margin-bottom: 8px;
        padding-right: 16px;

        .label {
          color: #909399;
          min-width: 84px;
        }

        .value {
          color: #303133;
        }
      }
    }
  }

  .goods-table {
    padding: 24px;

    ::v-deep .el-table {
      th {
        background-color: #f5f7fa;
        color: #606266;
        padding: 8px 0;
        font-weight: normal;
      }

      td {
        padding: 8px 0;
      }
    }

    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      background: #f5f7fa;
      color: #909399;
    }
  }

  .detail-actions {
    margin-top: 20px;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
  }
}
</style> 